<template>
  <div class="my-follow-container">
    <div class="my-follow-content" style="height: 650px; overflow-y: auto">
      <div style="padding: 6px 20px">
        <el-card
          shadow="hover"
          style="padding: 12px; margin-bottom: 10px"
          v-for="item in followedInfo"
          :key="item.id"
        >
          <div
            class="card-content"
            style="display: flex; justify-content: space-between"
          >
            <!-- 头像,点击头像跳转主页 -->
            <div class="avatar-container">
              <el-link
                :href="item.homePageUrl"
                target="_blank"
                :underline="false"
              >
                <el-avatar :size="60" :src="item.avatarUrl" fit="fit">
                </el-avatar>
              </el-link>
            </div>
            <div
              class="personal-info-container"
              style="margin: 0px 30px; width: 100%"
            >
              <!-- 点击nickName跳转主页 -->
              <div class="personal-nickName" style="text-align: left">
                <el-link
                  :href="item.homePageUrl"
                  target="_blank"
                  :underline="false"
                  style="font-size: 18px; font-weight: 600"
                >
                  {{ item.nickName }}
                </el-link>
              </div>
              <div class="personal-introduction" style="text-align: left">
                {{ item.introduction }}
              </div>
            </div>
            <div
              class="follow-button-container"
              style="display: flex; align-items: center; margin-right: 10px"
            >
              <!-- dropDown样式 -->
              <el-button
                type="primary"
                size="small"
                @click="handleFollow(item)"
                >{{ item.state === 0 ? "已关注" : "未关注" }}</el-button
              >
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="my-follow-pagination">
      <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-col :span="24">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :prev-text="`上一页`"
            :next-text="`下一页`"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  name: "myFollow",
})
export default class myFollow extends Vue {
  // TODO:取关后可以在当前页面再关注
  followedInfo: any = [
    {
      id: 0,
      avatarUrl: "https://picsum.photos/30/30?1",
      homePageUrl: "https://www.baidu.com",
      nickName: "测试人员",
      introduction: "hello world",
      state: 0,
    },
    {
      id: 1,
      avatarUrl: "https://picsum.photos/30/30?2",
      homePageUrl: "https://www.baidu.com",
      nickName: "开发人员",
      introduction: "hello world",
      state: 0,
    },
  ];
  //   总的关注数
  total: number = 20;
  pageSize: number = 10;
  pageIndex: number = 1;
  /**
   * 修改人的状态
   * @param item 当前关注的人的信息
   */
  handleFollow(item: any): void {
    item.state = item.state === 0 ? 1 : 0;
  }
  // TODO:补全函数
  handleSizeChange(val: number): void {
    this.pageSize = val;
    console.log(`每页 ${val} 条`);
    // 重新查询
    this.getMyFollow();
    // TODO:在这里可以依据查询状态设计表格加载状态
  }
  // 处理当前页面的切换
  handleCurrentChange(val: number): void {
    console.log(`当前页: ${val}`);
    this.pageIndex = val;
    // 重新查询
    this.getMyFollow();
    // TODO:在这里可以依据查询状态设计表格加载状态
  }
  // TODO:获取我关注的人员的列表
  getMyFollow(): void {
    this.$message({
      message: "获取我关注的人员的列表",
      type: "success",
    });
  }
}
</script>

<style lang="scss" scoped>
</style>